<template>
  <div>
    <el-tabs v-model="country" type="border-card" @tab-click="tabClick">
      <el-tab-pane label="CHINA" name="CHINA">
        <my-table :value="tableDataList"></my-table>
      </el-tab-pane>
      <el-tab-pane label="USA" name="USA">
        <my-table :value="tableDataList"></my-table>
      </el-tab-pane>
      <el-tab-pane label="JAPAN" name="JAPAN">
        <my-table :value="tableDataList"></my-table>
      </el-tab-pane>
      <el-tab-pane label="EUROZONE" name="EUROZONE">
        <my-table :value="tableDataList"></my-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import MyTable from './component/Table.vue'
export default {
  components: {
    MyTable
  },
  data() {
    return {
      country: 'CHINA',
      tableDataList: [],
      total: 0,
      queryForm: {
        country: 'CHINA',
        currentPage: 1,
        currentNum: 3
      }
    }
  },
  created() {
    this.getTableList()
  },
  methods: {
    async getTableList(type) {
      if(type) {
        this.queryForm.currentPage = 1
      }
      if(!this.$store.state.method) {
        this.queryForm.method = false
        this.queryForm.category = true
      }
      const res = await this.$http.get('edit/article', { params: this.queryForm })
      res.response.forEach(item => {
        if(!this.$store.state.method) {
          item.date = item.date.$date.split('T')[0]
          return
        }
        item.date = item.date.split('T')[0]
      })
      this.tableDataList = res.response
      if(!this.$store.state.method) {
        this.total = res.response.length
      }else {
        this.total = res.total
      }
    },
    tabClick() {
      this.queryForm.country = this.country
      this.getTableList()
    }
  }
}
</script>

<style>
</style>
